Germinate's Blog

react-navigation 为StackNavigator页面设置初始化props的三种方式

发表于 | | 阅读量 次

使用react-navigation的StackNavigator跳转页面时，有给页面设置初始化props的需求。根据应用场景不同，本文总结了三种方式：

场景一：所有页面设置初始props

如果要为所有页面设置初始props，且应用程序最外层的导航是StackNavigator，直接用screenProps即可。对官方文档摘录如下：

1
2
3
4
5
6
const SomeStack = StackNavigator({
  // config
});
<SomeStack
  screenProps={{ propKey: propValue }}
/>

在页面中使用this.props.screenProps即可获取screenProps的内容。

场景二：子StackNavigator下的所有页面设置初始props

这种场景更为常见。多个StackNavigator嵌套时，如果要为子StackNavigator下所有页面设置初始props，同样使用screenProps这个属性，但需参照以下写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const setScreenProps = SomeComponent =>
  class extends SomeComponent {
    render() {
      return <SomeComponent {...this.props} screenProps={{ propKey: propValue }} />;
    }
  };
  
const innerStack = StackNavigator({
  // config
});
const outerStack = StackNavigator({
  innerStackKey: { screen: setScreenProps(innerStack) },
  // other screen
});

首先定义了一个函数setScreenProps，为StackNavigator添加screenProps属性。然后在outerStack的定义中，使用这个函数做跳转入口。
这样设置之后，innerStack下的所有页面，都可以使用this.props.screenProps获取screenProps的内容。

场景三：某个特定页面设置初始props

这种场景无需使用screenProps，直接添加组件的属性即可，代码示例如下：

1
2
3
4
const SomeStack = StackNavigator({
  someScreenKey: { screen: props => <SomeScreenView {...props} myProp="value" /> },
  // other screen
});

this.props.myProp就可以获取设置的属性。注意，必须参照上述代码。踩过的坑有：

  1. screen: <SomeScreenView myProp="value" /> 直接输出RN组件，会报错。react-navigation在此处有校验，必须传入一个函数。（ES6的class本质也是函数）
  2. screen: () => <SomeScreenView myProp="value" /> 这种写法，SomeScreenView将没有navigation。

参考资料

  1. issue#935–Passing regular props when navigating
  2. issue#740–Setting screen specific props / params

以上内容参考 react-navigation github的issue。当学习使用新的、快速发展的技术时，github的issue比Google和Stack Overflow好用一百倍！